<template>
    <div class="page">
        <gzg-search :config="searchConfig" :showMore="false" :form="searchForm" :label-width="120"
            @search="search"></gzg-search>
        <div class="tool-wrap">
            <el-button class="btn" type="primary" @click="add" v-if="btnShow">新增</el-button>
        </div>
        <div class="grid-wrap">
            <el-table style="width:100%;" height="100%" row-key="id" :data="tableData">
                <!-- <el-table-column label="赠送角色" prop="agent_type_desc"></el-table-column> -->
                <el-table-column label="姓名" prop="real_name"></el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="状态" prop="give_status_desc"></el-table-column>
                <el-table-column label="赠送区域" prop="give_region_desc"></el-table-column>
                <el-table-column label="赠送商家" prop="give_seller_desc"></el-table-column>
                <!-- <el-table-column label="创建时间" prop="create_at" width="180px"></el-table-column> -->
                <!-- <el-table-column label="最近更新时间" prop="update_at" width="180px"></el-table-column> -->
                <el-table-column label="操作" fixed="right" width="180px">
                    <template #default="props">
                        <el-button link type="primary" size="small" v-if="props.row.button.view_region_btn" @click="edit(props.row)">赠送区域</el-button>
                        <el-button link type="primary" size="small" v-if="props.row.button.view_seller_btn" @click="handleGive(props.row)">赠送商家</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination v-model:current-page="params.page"
                           v-model:page-size="params.page_size"
                           :page-sizes="[100, 200, 300, 400]" 
                           layout="total, prev, pager, next" 
                           :total="total"
                           @size-change="handleSizeChange" 
                           @current-change="handleCurrentChange" />
        </div>
        <view-dialog :dialogVisible="dialogVisible" :id="detail_id" :state="dialogState" @success="dialogSuccess"
            @close="dialogVisible = false"></view-dialog>
    </div>
</template>

<script  lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { InfoFilled, Plus, Search, Hide, View } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

import { getGiveList } from 'services/setting'

import viewDialog from './component/view-dialog/index'

import { assign } from 'lodash'

const dialogState = ref('edit')

const dialogVisible = ref(false)

const dialogSuccess = () => {
    getList();
    dialogVisible.value = false
}

const detail_id = ref()

const searchForm = reactive({
    mobile: '',
    name: ''
})

const searchConfig = reactive([{
    id: 'mobile',
    label: '手机号',
    placeholder: '请输入手机号',
    type: 'input'
}, {
    id: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
    type: 'input',
    
}])

const params = ref({
    agent_type: '',
    mobile: '',
    name: '',
    give_status: '',
    page: 1,
    page_size: 20
})

const search = (searchParams: any) => {
    assign(params.value, searchParams)

    params.value.page = 1

    getList()
}

const tableData = ref<any[]>([])
const total = ref(0)
const btnShow = ref(false)

const getList = () => {
    console.log(params.value)

    getGiveList(params.value).then((res: any) => {
        tableData.value = res.items || [];
        total.value = parseInt(res.total_rows) || 0
        btnShow.value = res.add_btn
    })
}

const handleGive = (row: any) => {
    dialogState.value = 'give'
    dialogVisible.value = true
    detail_id.value = row.id
}

const handleEnable = (row: any) => {
    let enabled = row.give_status;
    ElMessageBox.confirm(`确认进行【${enabled == 1 ? '启用' : '禁用'}】操作`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        toggleGive({
            id: row.id || undefined,
            type: enabled == 1 ? 2 : 1
        }).then(res => {
            getList()
            ElMessage.success('操作成功')
        })
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const add = () => {
    dialogState.value = 'add'
    detail_id.value = undefined
    dialogVisible.value = true;
}

const edit = (row: any) => {
    dialogState.value = 'edit'
    dialogVisible.value = true
    detail_id.value = row.id
}

const handleSizeChange = (val: number) => {
    params.value.page_size = val
    params.value.page = 1
    getList();
}

const handleCurrentChange = (val: number) => {
    params.value.page = val
    getList()
}

onMounted(() => {
    getList()
})

</script>

<style lang="scss">

</style>